import React, { useEffect, useState } from "react";
import { Breadcrumb, Table, Image, Switch, Button, Space } from "antd";

import { getProjectList } from "../../../api/index";

const Index = () => {
  const [dataSource, setDataSource] = useState([]);

  const columns = [
    {
      title: "产品名称",
      dataIndex: "proname",
      width: 200,
    },
    {
      title: "产品图片",
      dataIndex: "img1",
      render(text) {
        return <Image src={text} width={100}></Image>;
      },
    },
    {
      title: "产品分类",
      dataIndex: "category",
    },
    {
      title: "产品品牌",
      dataIndex: "brand",
    },
    {
      title: "产品价格",
      dataIndex: "originprice",
    },
    {
      title: "产品折扣",
      dataIndex: "discount",
    },
    {
      title: "产品库存",
      dataIndex: "stock",
    },
    {
      title: "是否售卖",
      dataIndex: "issale",
      render(text) {
        return <Switch defaultChecked={text === 1} />;
      },
    },
    {
      title: "操作",
      width: 200,
      render(text, record) {
        return (
          <Space>
            <Button>编辑</Button>
            <Button danger type="primary" onClick={() => remove(record)}>
              删除
            </Button>
          </Space>
        );
      },
    },
  ];

  const remove = (record) => {
    console.log(record);
  };

  useEffect(() => {
    getProjectList().then((res) => {
      if (res) {
        console.log(res.data);
        setDataSource(res.data);
      }
    });
  }, []);

  return (
    <div>
      <Breadcrumb
        style={{ marginBottom: 20 }}
        items={[
          {
            title: "产品管理",
          },
          {
            title: "产品列表",
          },
        ]}
      />
      <Table dataSource={dataSource} columns={columns} rowKey="proid" />;
    </div>
  );
};

export default Index;
